<template>
  <div class="b-cell">
    <div class="b-cell-label" :title="label">
      {{ label }}:
      <slot name="label"></slot>
    </div>
    <div class="b-cell-content" :title="content">
      {{ content }}
      <slot></slot>
    </div>
  </div>
</template>
<script setup lang="ts">
defineProps({
  label: {
    type: String,
    default: ''
  },
  content: {
    type: String,
    default: ''
  }
})
</script>
<style scoped lang="scss">
.b-cell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  
  min-width: 150px;
  flex: 1;
  border: 1px solid rgb(0, 71, 120);
  overflow: hidden;
  line-height: 1.2em;
  .b-cell-label {
    position: relative;
    flex: 1;
    height: 100%;
    max-width: 150px;
    padding: calc(0.5em);
    text-align: right;
    color: var(--el-color-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    &:before {
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      background: linear-gradient(180deg, rgba(13, 129, 188, 0.5), rgba(28, 118, 132, 0.5) 100%);
      opacity: 0.5;
      z-index: -1;
    }
  }
  .b-cell-content {
    position: relative;
    height: 100%;
    padding: calc(0.5em);
    flex: 2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 100%;
    &:before {
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      background: rgba(132, 150, 255, 0.1);
      opacity: 0.5;
      z-index: -1;
    }
  }
}
</style>
